<template>
	<view class="content">
		<view>阅读文章数记录如下：</view>
		<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA" @touchend="moveLineA"></canvas>
		<!-- 画布，图表的HTML部分-->
		<view style="color: rgb(70, 160, 161);">Keep Going!有志者事竟成！</view>
	</view>
</template>

<script>
	import uCharts from '../../../component/u-charts/u-charts.js'; //引入js文件
	var _self; //用于全局使用this
	var canvaLineA = null; //uCharts实例
	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '', //画布的宽高
				data: { //数据
					categories: ["周一", "周二", "周三", "周四", "周五", "周六","周日"],
					series: [{
						name: "上周阅读文章数",
						data: [3, 4, 2, 3, 4, 5,1]
					}, {
						name: "本周阅读文章数",
						data: [2, 5, 3, 5,6, 3,2]
					}]
				}
			}
		},
		onLoad() {
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500); //设置宽高
			_self = this //声明this
			_self.showLineA("canvasLineA", _self.data); //触发执行函数
		},
		methods: {
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({ 
					$this: _self, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#facc14', '#f04864'], //每一条的颜色
					fontSize: 9, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					xAxis: { //X轴配置
						gridColor: '#CCCCCC', //X轴网格颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self.cWidth, //canvas宽度，单位为px
					height: _self.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'curve' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineA(e) {
				canvaLineA.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}
		}
	}
</script>

<style>
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	.content{
		height:400rpx;
		width:100%;
		margin-top:5%;
		text-align: center;
	}
</style>
